<template>
  <div class="app-container">
    <el-form ref="formData" :rules="rules" :model="formData" label-position="left" label-width="70px">
      <el-form-item label="ID" v-show="false" >
        <el-input v-model="formData._id" disabled></el-input>
      </el-form-item>
      <el-form-item label="版本号" prop="versoion">
        <el-input v-model="formData.versoion" :disabled="versoinDisbled"></el-input>
      </el-form-item>
      <el-form-item label="公告内容" >
        <quill-editor ref="editor" v-model="formData.context" :height="400"></quill-editor>
      </el-form-item>
      <el-form-item>
        <el-button @click="$router.push('bbkzList')">返回</el-button>
        <el-button type="primary" @click="updateData()">发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import { getBbkzItemId, updateBbkzItem } from '@/cloudbaseapi/cloudbase-bbkz'
import { cloud_md5, loadingFull } from '@/cloudbaseapi/cloudbase-api'
import { Message } from 'element-ui'


import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from 'vue-quill-editor'
export default {
  props: ['isEdit'],
  components: { quillEditor },
  data() {
    return {
      versoinDisbled: false,
      formData: {
        _id: 0,
        versoion: '',
        update: '',
        context: ''
      },
      rules: {
        versoion: [{ required: true, message: '请输入版本号', trigger: 'blur' }]
      }
    }
  },
  async activated() {
    const load = loadingFull()
    if (this.isEdit) {
      const id = this.$route.query.id
      const data = await getBbkzItemId(id)
      this.formData = data.data[0]
      this.versoinDisbled = true
    } else {
      this.versoinDisbled = false
      this.formData._id = cloud_md5(Date.now())
    }
    setTimeout(() => {
      load.close()
    }, 500)
  },
  methods: {
    updateData() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          const load = loadingFull()
          if(!this.isEdit) {
            this.formData.update = new Date()
          }
          updateBbkzItem(this.formData, this.isEdit ? 'edit' : 'create').then(res => {
            setTimeout(() => {
              load.close()
            }, 500)
            Message({
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          }).catch(err => {
            setTimeout(() => {
              load.close()
            }, 500)
            console.log(err)
            Message({
              message: '保存失败',
              type: 'error',
              duration: 2000
            })
          })
        } else {
          Message({
            message: '表单填写不规范请按要求填',
            type: 'error',
            duration: 2000
          })
        }
      })
    }
  },
  watch: {
    isEdit: function(val) {
      this.isEdit = val
    }
  }
}
</script>

<style scoped>

</style>
